<template>
    <div id="car-loan" class="compute-loan">
        <div class="car-value">
            <group >
                <x-input class="picker" type="number" title="贷款金额(万)" v-model="value" placeholder="请输入" ></x-input>
                <p class="error" v-show="loan0 === 1">请输入贷款金额</p>
                <p class="error" v-show="loan0 === 6">商业贷款最大额度不能超过1亿</p>
                <popup-picker title="贷款期限" :data="carlist" v-model="value1" value-text-align="left" @on-change="changetime"></popup-picker>
                <p class="error" v-show="loan0 === 2">请选择贷款期限</p>
                <popup-picker class="loanrate" v-if="yearRate"  title="贷款年利率" :data="ratelist" v-model="value2" value-text-align="left"  @on-change="change"></popup-picker>
                <popup-picker class="loanrate"  v-if="!yearRate"  title="贷款年利率" :data="ratelist1" v-model="value2" value-text-align="left"  @on-change="change"></popup-picker>
                <p class="error" v-show="loan0 === 3">请选择贷款利率</p>
                <p class="error" v-show="loan0 === 4">请选择或输入贷款利率</p>
                <x-input class="zdyrate" v-if="zdyrate" title="贷款年利率(%)" type="number" v-model="value3" placeholder="自定义基准利率" ></x-input>
                <p class="error" v-show="loan0 === 5">请输入贷款利率</p>
            </group>
       </div>
       <flexbox class='persion-btn'>
            <flexbox-item><div class='flex-demo next' @click='empty'>清空重填</div></flexbox-item>
            <flexbox-item><div class='flex-demo' @click='start'>开始计算</div></flexbox-item>
       </flexbox>
       <div class="circle"></div>
       <div class="count-resoult" v-if="soult">
            <tab :line-width="2" active-color="rgb(20,93,210)" bar-active-color="rgb(20,93,210)">
                <tab-item   selected @on-item-click="onItemClick">等额本息</tab-item>
                <tab-item   @on-item-click="onItemClick">等额本金</tab-item>
            </tab> 
            <ul class="count-ul">
                <li>
                    <div>
                        贷款金额
                        <br/>
                        <span>{{money}}</span>
                        <br/>
                    </div>
                    <div>
                        总利息(元)
                        <br/>
                        <span v-if="show">{{interest}}</span>
                        <span v-if="!show">{{interest1}}</span>
                    </div>
                </li>
                <li>
                    <div>
                        总还款(元)
                        <br/>
                        <span v-if="show">{{totalplay}}</span>
                        <span v-if="!show">{{totalplay1}}</span>
                    </div>
                    <div v-if="show">
                        每月还款(元)
                        <br/>
                        <span >{{everyplay}}</span>
                    </div>
                    <div v-if="!show">
                        首月还款(元)
                        <br/>
                        <span>{{everyplay1}}</span>
                        <br/>
                        <span class="small">每月递减{{decrease}}元</span>
                    </div>
                </li>
            </ul>
        </div>
    </div>
</template>
<script>
import { XInput, Group, PopupPicker, TransferDom, Tab, TabItem, Flexbox, FlexboxItem } from 'vux'
export default {
  directives: {
    TransferDom
  },
  components: {
    XInput,
    Group,
    PopupPicker,
    Tab,
    TabItem,
    Flexbox,
    FlexboxItem
  },
  data () {
    return {
      carlist: [['请选择', '6个月(6期)', '1年(12期)', '2年(24期)', '3年(36期)', '4年(48期)', '5年(60期)']],
      ratelist1: [['请选择', '基准利率(3.6975%)', '基准利率(3.915%)', '基准利率(4.1325%)', '基准利率(4.35%)', '基准利率(4.785%)', '基准利率(5.22%)', '自定义利率']],
      ratelist: [['请选择', '基准利率(4.0375%)', '基准利率(4.275%)', '基准利率(4.5125%)', '基准利率(4.75%)', '基准利率(5.225%)', '基准利率(5.7%)', '自定义利率']],
      value: '',
      value1: ['请选择'],
      value2: ['请选择'],
      value3: '',
      zdyrate: false,
      soult: false,
      show: true,
      yearRate: true,
      loan0: 0, // 出错显示
      money: '',
      interest: '',
      totalplay: '',
      everyplay: '',
      interest1: '',
      totalplay1: '',
      everyplay1: '',
      decrease: ''
    }
  },
  created () {
    window.document.title = '车贷计算器'
  },
  methods: {
    change (val) {
      if (val[0] === '自定义利率') {
        this.zdyrate = true
      } else {
        this.zdyrate = false
      }
      if (val[0] === '请选择') {
        this.soult = false
      }
      if (val[0] === '自定义利率' && this.value3 === '') {
        this.soult = false
      }
    },
    changetime (val) {
      if (val[0] === '6个月(6期)' || val[0] === '1年(12期)') {
        this.yearRate = false
        this.value3 = ''
        this.zdyrate = false
      } else {
        this.yearRate = true
        this.value3 = ''
        this.zdyrate = false
      }
    },
    empty () {
      this.value = ''
      this.value1 = ['请选择']
      this.value2 = ['请选择']
      this.value3 = ''
      this.zdyrate = false
      this.soult = false
      this.loan0 = 0
    },
    onItemClick (index) {
      if (index === 0) {
        this.show = true
        this.debx()
      }
      if (index === 1) {
        this.show = false
        this.debj()
      }
    },
    start () {
      if (this.value === '') {
        this.loan0 = 1
        this.soult = false
      } else if (this.value > 10000) {
        this.loan0 = 6
        this.soult = false
      } else if (this.value1[0] === '请选择') {
        this.loan0 = 2
        this.soult = false
      } else if (this.value2[0] === '请选择') {
        this.loan0 = 3
        this.soult = false
      } else if (this.value2[0] === '自定义利率' && this.value3 === '') {
        this.loan0 = 5
        this.soult = false
      } else if (this.value !== '' && this.value1[0] !== '请选择') {
        if (this.show === true) {
          this.debx()
        } else if (this.show === false) {
          this.debj()
        }
      }
    },
    debx () {
      // 开始计算
      var loanmoney = this.value * 10000 // 贷款金额
      var loantime = this.value1[0]
      var loanrate1 = this.value2[0].slice(5)
      loanrate1 = parseFloat(loanrate1) // 贷款年利率 （选择）
      var loanrate2 = this.value3
      loanrate2 = parseFloat(loanrate2) // 贷款年利率（自定义）
      this.money = loanmoney.toFixed(2) // 显示的贷款金额
    //   var monthbj = loanmoney / loantime // 每月本金
      if (this.value1[0] === '6个月(6期)') {
        loantime = parseFloat(loantime)
      } else {
        loantime = parseFloat(loantime) * 12 // 贷款期限
      }
      if (this.value2[0] !== '请选择' && this.value2[0] !== '自定义利率') {
        this.loan0 = 100
        this.soult = true
        // 选择
        // 等额本息
        var monthrate = loanrate1 / (12 * 100) // 月利率
        // 月均还款
        var monthrefund = (loanmoney * monthrate * Math.pow((1 + monthrate), loantime)) / (Math.pow((1 + monthrate), loantime) - 1)
        // 还款总额
        this.totalplay = (monthrefund * loantime).toFixed(2)
        // 每月还款
        this.everyplay = monthrefund.toFixed(2)
        // 总利息
        this.interest = (this.totalplay - this.money).toFixed(2)
      }
      if (this.value2[0] === '自定义利率') {
        this.loan0 = 100
        this.soult = true
        // 自定义
        // 等额本息
        var monthRate = loanrate2 / (12 * 100) // 月利率
        // 月均还款
        var monthRefund = (loanmoney * monthRate * Math.pow((1 + monthRate), loantime)) / (Math.pow((1 + monthRate), loantime) - 1)
        // 还款总额
        this.totalplay = (monthRefund * loantime).toFixed(2)
        // 每月还款
        this.everyplay = monthRefund.toFixed(2)
        // 总利息
        this.interest = (this.totalplay - this.money).toFixed(2)
      }
    },
    debj () {
      var loanmoney = this.value * 10000 // 贷款金额
      var loantime = this.value1[0]
      loantime = parseFloat(loantime) * 12 // 贷款期限
      var loanrate1 = this.value2[0].slice(5)
      loanrate1 = parseFloat(loanrate1) // 贷款年利率 （选择）
      var loanrate2 = this.value3
      loanrate2 = parseFloat(loanrate2) // 贷款年利率（自定义）
      this.money = loanmoney.toFixed(2) // 显示的贷款金额
      var monthbj = loanmoney / loantime // 每月本金
      if (this.value2[0] !== '请选择' && this.value2[0] !== '自定义利率') {
        this.loan0 = 100
        this.soult = true
        // 选择
        // 等额本金
        var monthrate = loanrate1 / (12 * 100) // 月利率
        // 月均还款
        var monthrefund = loanmoney / loantime + monthrate * loanmoney
        // 每月还款
        this.everyplay1 = monthrefund.toFixed(2)
        // 总利息
        var rate = (((loanmoney / loantime + loanmoney * (loanrate1 / 1200)) + loanmoney / loantime * (1 + loanrate1 / 1200)) / 2) * loantime - loanmoney
        var interest1 = rate
        this.interest1 = interest1.toFixed(2)
        // 还款总额
        var totalplay1 = (interest1 + loanmoney)
        this.totalplay1 = totalplay1.toFixed(2)
        var decreased = monthbj * (loanrate1 / 1200)
        this.decrease = decreased.toFixed(2) // 每月递减
      }
      if (this.value2[0] === '自定义利率') {
        this.loan0 = 100
        this.soult = true
        // 自定义
        // 等额本息
        var Monthrate = loanrate2 / (12 * 100) // 月利率
        // 月均还款
        var Monthrefund = loanmoney / loantime + Monthrate * loanmoney
        // 每月还款
        this.everyplay1 = Monthrefund.toFixed(2)
        // 总利息
        var Rate = (((loanmoney / loantime + loanmoney * (loanrate2 / 1200)) + loanmoney / loantime * (1 + loanrate2 / 1200)) / 2) * loantime - loanmoney
        this.interest1 = Rate.toFixed(2)
        // 还款总额
        var Totalplay1 = (parseFloat(this.interest1) + loanmoney)
        this.totalplay1 = Totalplay1.toFixed(2)
        var Decreased = monthbj * (loanrate2 / 1200)
        this.decrease = Decreased.toFixed(2) // 每月递减
      }
    }
  }
}
</script>
